<template> 
  <div class="v-simple-cropper"> 
    <div class="form">
      <div class="btn-close" @click="close">
      </div>
        <div class="upload-image" v-if="!pictures">
          <img src="../assets/img/upload.png" />
          <input
              ref="file"
              type="file"
              accept="image/*"
              @change="uploadChange">
              <p>点击此处，上传照片</p>
        </div>
      <img class="pictures" :src="pictures" v-if="pictures" />
      <!-- <div class="form-item">
          <input v-model="formInline.city" placeholder="我来自的城市" />
      </div> -->
      <!-- <div class="form-item">
          <textarea v-model="formInline.greeting" placeholder="我的祝福语(15个字符)" maxlength='15'/>
      </div> -->
      <div class="form-item">
        <div class="text-verify" v-if="verify">{{verify}}</div>
      </div>
      <div class="btn-primary" @click="showPosterPop">提交</div>
    </div>
    <div class="v-cropper-layer" ref="layer"> 
      <div class="layer-header"> 
      <button class="cancel" @click="cancelHandle">取消</button> 
      <button class="confirm" @click="confirmHandle">裁剪</button> 
      </div> 
      <img ref="cropperImg"> 
     </div> 
  </div> 
</template> 

<script> 
import Cropper from 'cropperjs' 
import 'cropperjs/dist/cropper.min.css' 
export default { 
name: 'v-simple-cropper', 
props: { 
  initParam: Object,
  successCallback: { 
    type: Function, 
    default: () => {} 
  } 
}, 
data () { 
  return { 
    cropper: {}, 
    formInline: {
        greeting: ""
      },
    verify:'',
    pictures:'',
    bless:[
      '',
    ]
  } 
}, 
mounted () { 
  this.init() 
}, 
methods: {  
    // 初始化裁剪插件 
    init () { 
      let cropperImg = this.$refs['cropperImg'] 
      this.cropper = new Cropper(cropperImg, { 
        aspectRatio: 0.85 / 1, 
        dragMode: 'move',
      }) 
      this.formInline.greeting = this.bless[Math.ceil(Math.random()*1000) % this.bless.length]
    }, 
    // 点击上传按钮 
    upload () { 
      this.$refs['file'].click() 
    }, 
    // 选择上传文件 
    uploadChange (e) { 
      let file = e.target.files[0]
      console.log(file)
      let URL = window.URL || window.webkitURL 
      this.$refs['layer'].style.display = 'block' 
      this.cropper.replace(URL.createObjectURL(file)) 
    }, 
    // 取消上传 
    cancelHandle () { 
      this.cropper.reset() 
      this.$refs['layer'].style.display = 'none' 
      this.$refs['file'].value = '' 
    }, 
  // 确定上传 
    confirmHandle () { 
      let cropBox = this.cropper.getCropBoxData() 
      let scale = this.initParam['scale'] || 1 
      let cropCanvas = this.cropper.getCroppedCanvas({ 
        width: cropBox.width * scale, 
        height: cropBox.height * scale 
      }) 
      let imgData = cropCanvas.toDataURL('image/jpeg') 
      let formData = new window.FormData() 
      formData.append('img', imgData) 
      this.pictures=imgData
       this.$refs['layer'].style.display = 'none' 
      this.successCallback(imgData) 
      },
    showPosterPop(){
      
      // if(!this.formInline.greeting){
      //   this.verify="请输入我祝福语"
      //   return
      // }
      if(!this.pictures){
        this.verify="请上传图片"
        return
      }
      this.verify='';
      this.$emit('showPoster',this.formInline.greeting)
    },
    close(){
      this.$emit('closeCropperFrom')
    }
 } 
} 
</script> 
  
<style scoped> 
.v-simple-cropper  .v-cropper-layer { 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: #fff; 
  z-index: 99999; 
  display: none; 
}
.v-simple-cropper  .v-cropper-layer .layer-header { 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 99999; 
  background: #fff; 
  width: 100%; 
  height: .8rem; 
  padding: 0 .2rem; 
  box-sizing: border-box; 
} 
.cancel, 
.confirm { 
  line-height: .8rem; 
  font-size: .28rem; 
  background: inherit; 
  border: 0; 
  outline: 0; 
  float: left; 
 } 
.confirm { 
  float: right; 
} 
.v-simple-cropper img { 
  position: inherit!important; 
  border-radius: inherit!important; 
  float: inherit!important; 
} 
.upload-image{
    margin: 0  auto;
    margin-top:50px;
    color: #ffffff;
    font-size: 14px;
    font-weight:bold;
    text-align: center;
    position: relative;
    margin-bottom:50px;
}
.upload-image input{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
    left: 0;
    top: 0;
}
.upload-image img{
   width:111px;
}
.form-item{
  margin:0 30px;
  margin-bottom: 10px;
}
.form-item input,textarea{
  background: #efefef;
    resize: none;
    border: none;
    height: 0.4rem;
    border-radius: 3px;
    padding: 0 10px;
    margin-bottom: 5px;
    width:100%;
}
.form-item textarea{
  height: 100px;
  padding-top: 10px;
}
.pictures{
  width:111px;
  height:117px;
  margin-bottom: 0.5rem;
}
.form{
  margin: 0 24px;
  margin-top: 70px;
  padding:60px 0;
  height: 500px;
  box-shadow:0 0 8px rgba(0,0,0,.1);
  border-radius: 10px;
  /*background:linear-gradient(180deg,rgba(255,148,153,0.5) 0%,rgba(255,59,97,1) 100%);*/
  background:#f1301b;
  position: relative;  
}
.btn-primary{
  margin:0 30px;
  display: block;
  background:linear-gradient(180deg,rgba(252,255,215,1) 0%,rgba(255,242,179,1) 100%);
  color:#893229;
}
.text-verify{
  text-align: left;
  color: #f7d6d6;
}
.btn-close{
    width: 30px;
    height: 30px;
    background-image: url("../assets/img/close.png");
    background-size: cover;
    position: absolute;
    right: 20px;
    top: 10px;
}
</style> 
